<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="hdWraper">
        <div id="header">
            <p id="logo">
                <a href=""><img src="./img/网页严选1.png" alt=""></a>
            </p>
            <div id="search">
                <input id="" type="text">
            </div>
            <button id="but">登录</button>
            <p id="big">
                <a href=""><img src="./img/big.png" alt=""></a>
            </p>
            <span id="title">搜索商品, 共78049款好物</span>


            <!-- <div id="type"> -->
                <div id="tab">
                    <ul>
                        <li class="active">推荐</li>
                        <li>居家生活</li>
                        <li>服饰鞋包</li>
                        <li>美食酒水</li>
                    </ul>
                    <p id="arrow"><img src="./img/下箭头.png" alt=""></p>
                <!-- </div> -->
                <!-- <div class="main">
                    <div class="content" style="display: block;">实事内容</div>
                    <div class="content">科技内容</div>
                    <div class="content">娱乐内容</div>
                    <div class="content">体育内容</div>
                </div> -->
            </div>
            
        </div>

        <div id="Carousel">
            <ul id="box">
                <li class="box-item"><img src="./img/1.png" alt="" class=""></li>
                <li class="box-item"><img src="./img/2.jpg" alt="" class=""></li>
                <li class="box-item"><img src="./img/3.png" alt="" class=""></li>
                <li class="box-item"><img src="./img/4.jpg" alt="" class=""></li>
                <li class="box-item"><img src="./img/1.png" alt="" class=""></li>
            </ul>
        </div>

        <div id="m-indexServicePolicy">
            <ul id="g-grow">
                <li id="item"><a class="s-pic"><img src="./img/a.png" alt="" class="s-icon"></a><span id="text">网易自营品牌</span></li>
                <li id="item"><a class="s-pic"><img src="./img/b.png" alt="" class="s-icon"></a><span id="text">30天无忧退货</span></li>
                <li id="item"><a class="s-pic"><img src="./img/c.png" alt="" class="s-icon"></a><span id="text">48小时快速退款</span></li>

            </ul>
        </div>

    </div>

    <div id="function">
        <ul id="kingkong-item">
            <li>
                <p class="icon"><a href="#"><img src="./img/2.1.png" alt=""></a></p>
                <p class="title"><a href="#">新品首发</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/2.2.png" alt=""></a></p>
                <p class="title"><a href="#">居家生活</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/2.3.png" alt=""></a></p>
                <p class="title"><a href="#">服饰鞋包</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/2.4.png" alt=""></a></p>
                <p class="title"><a href="#">美食酒水</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/2.5.png" alt=""></a></p>
                <p class="title"><a href="#">个护清洁</a></p>
            </li>
        </ul>
    </div>

    <div id="function-1">
        <ul id="kingkong-item">
            <li>
                <p class="icon"><a href="#"><img src="./img/3.1.png" alt=""></a></p>
                <p class="title"><a href="#">母婴亲子</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/3.2.png" alt=""></a></p>
                <p class="title"><a href="#">运动旅行</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/3.3.png" alt=""></a></p>
                <p class="title"><a href="#">数码家电</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/3.4.png" alt=""></a></p>
                <p class="title"><a href="#">全球特色</a></p>
            </li>
            <li>
                <p class="icon"><a href="#"><img src="./img/3.5.png" alt=""></a></p>
                <p class="title"><a href="#">好货抄底</a></p>
            </li>
        </ul>
    </div>


    <div id="advertisement">
        <p><a href=""><img src="./img/33426e217b0479ffa2e1e0c2b5b9ec72.gif" alt=""></a></p>
    </div>


    <div id="page-content">
        <div id="lazy-component-wrapper">
            <div><span>新人专享礼</span></div>
        </div>

        <div id="content">
            <div id="left">
                <div id="name">新人专享礼包</div>
                <p><img src="./img/left.png" alt=""></p>
            </div>

            <div id="right">
                <div id="module1">
                    <div id="m-activityItem">
                        <div>福利社<p>今日特价</p></div>
                        <p id="pirWrap"><img src="./img/right1.png" alt=""></p>
                    </div>
                </div>

                <div id="module2">
                    <div id="m-activityItem">
                        <div>新人拼团<p>1元起包邮</p></div>
                        <p id="pirWrap"><img src="./img/right2.png" alt=""></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="hotsale">
        <div id="h-content">
            <div id="h-title">
                <div>类目热销榜</div>
            </div>
            <div id="line1">
                <div id="item-big2">
                    <div id="item-top2">
                        <div>居家生活榜</div>
                    </div>
                    <p><img src="./img/top3.png" alt=""></p>
                </div>              

                <div id="item-big1">
                    <div id="item-top1">
                        <div>服饰包鞋榜</div>
                    </div>
                    <p><img src="./img/top4.png" alt=""></p>
                </div>

                <div id="item-small1">
                    <div>美食酒水榜</div>
                    <p id="small1"><img src="./img/small1.png" alt=""></p>
                </div>

                <div id="item-small1">
                    <div>个护清洁榜</div>
                    <p id="small1"><img src="./img/small2.png" alt=""></p>
                </div>

                <div id="item-small1">
                    <div>数码家电</div>
                    <p id="small1"><img src="./img/small3.png" alt=""></p>
                </div>

                <div id="item-small1">
                    <div>严选全球榜</div>
                    <p id="small1"><img src="./img/small4.png" alt=""></p>
                </div>

                <div id="item-small1">
                    <div>母婴亲子榜</div>
                    <p id="small1"><img src="./img/small5.png" alt=""></p>
                </div>

                <div id="item-small1">
                    <div>运动旅行榜</div>
                    <p id="small1"><img src="./img/small6.png" alt=""></p>
                </div>

            </div>
        </div>

        <div id="specialsale">
            <div id="item2">
                <div id="item-2">
                    <div>奥莱特卖</div>
                    <div id="desc">全场二折</div>
                        <p id="special"><img src="./img/special1.png" alt=""></p>
                        <p id="special"><img src="./img/special2.png" alt=""></p>
                </div>

                <div id="item-2">
                    <div>严选众筹</div>
                    <div id="desc1">全场二折</div>
                        <p id="special"><img src="./img/special3.png" alt=""></p>
                        <p id="special"><img src="./img/special4.png" alt=""></p>
                </div>
            </div>
        </div>



        <div id="tail">
            <div id="bd">
                <a c href="">下载APP</a>
                <a c href="">电脑版</a>
            </div>
            <p id="copyright">网易公司版权所有 © 1997-2021<br>食品经营许可证：JY13301080111719</p>
        </div>


        <div id="after">
            <ul id="small-w">
                <li>
                    <P class="photoes"><img src="./img/index-r.png" alt=""></P>
                    <P class="string-1">首页</P>
                </li>
                <a href="./classification.html"><li>
                    <P class="photoes"><img src="./img/lei.png" alt=""></P>
                    <P class="string">分类</P>
                </li></a>
                <a href="./buy.html"><li>
                    <P class="photoes"><img src="./img/buy-w.png" alt=""></P>
                    <P class="string">值得买</P>
                </li></a>
                <li>
                    <P class="photoes"><img src="./img/show.png" alt=""></P>
                    <P class="string">购物车</P>
                </li>
                <li>
                    <P class="photoes"><img src="./img/user.png" alt=""></P>
                    <P class="string">个人</P>
                </li>
            </ul>
        </div>

    </div>



</body>
<script>
        var box = document.getElementById('tab');
        var btns = box.getElementsByTagName('li');//集合
        var contents = box.getElementsByClassName('content');
        for(var i = 0; i < btns.length; i++) {// 0 1 2 3 
            btns[i].index = i;//绑定索引 btns[0].index=0;
            btns[i].onclick = function() {
                console.log(this.index);
                for(var j = 0; j < btns.length; j++) {
                    btns[j].className = '';//清除所有样式
                    // contents[j].style.display = 'none';//隐藏所有内容盒子
                }
                btns[this.index].className = 'active';//当前那个盒子高亮
                contents[this.index].style.display = 'block';//当前对于的内容显示
            }

        }
</script>
</html>